<template>
	<view class="company-info">
		<view class="base-info" v-if="userinfo">
			<view class="company-name">{{needInfo.customerName}}</view>
			<view v-if="needInfo.cutomerBaseType!=0">服务类型：
				{{needInfo.cutomerBaseType===1?'顾问服务':needInfo.cutomerBaseType===2?'数字化服务':'管家服务'}}</view>
			<view>期望贷款金额：{{needInfo.needAmount}}万元</view>
			<view>预计用款日期：{{needInfo.needDate}}</view>
			<view>需求状态： {{needInfo.typeDesc}}</view>
			<view>创建时间： {{needInfo.creatorTime}}</view>
			<view style="color: yellow;" @click="callGuan(needInfo.customerUserPhone)">
				点击联系：{{needInfo.customerUserPhone}}</view>
			<view>需求描述：{{needInfo.needDesc}}</view>
			<view style="margin-top: 20rpx; ">
				<u-button v-if="needInfo.type==1 && userinfo.roleName.indexOf('信贷管家')> -1" @click="jieshu()"
					type="error">结束</u-button>
			</view>
		</view>

		<view>

			<scroll-view scroll-y style="height: 100%;width: 100%;" v-if="userinfo">
				<mescroll-body ref="mescrollRef" safearea @init="mescrollInit" @down="downCallback" @up="upCallback">
					<view class="order">
						<u-time-line>
							<u-time-line-item :nodeTop="index+1" v-for="(item,index) in dataList" :key="index">
								<!-- 此处自定义了左边内容，用一个图标替代 -->
								<template v-slot:node>
									<view class="u-node" style="background: #19be6b;">
										<!-- 此处为uView的icon组件 -->
										<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
									</view>
								</template>
								<template v-slot:content>
									<view>
										<view class="u-order-title">客户经理： {{ item.nickName }}
										</view>
										<view class="u-order-time">最后联络时间：{{ item.lastModifyTime }}</view>

									</view>
									<u-line v-if="userinfo.roleName.indexOf('信贷管家')>-1" color="info"
										border-style="dotted" margin="20rpx 20rpx 0rpx 0rpx" hair-line="true" />

									<view class="bottom"
										v-if="userinfo.roleName.indexOf('客户经理')>-1&&userinfo.id==item.accountManagerUserId">

										<view>
											<u-button size="mini" @click="handleDetail(item)"
												type="primary">发起业务</u-button>
										</view>
									</view>

								</template>
							</u-time-line-item>

						</u-time-line>

					</view>


				</mescroll-body>
			</scroll-view>



		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	import config from '@/common/js/config.js'
	export default {
		components: {

		},
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)

		data() {
			return {
				needInfo: {

				},
				userinfo: null,
				dataList: [],

				current: 0,
				demandId: null,
				companyInfo: {},
				needTypeData: this.$jnpf.dictionaryData('needType'),
			}
		},
		onLoad(options) {
			if (options.id) {
				this.demandId = options.id
				this.init()
			}
			const userProvider = uni.getStorageSync(config.Global.cache + '_UserProvider');

			this.userinfo = userProvider;
		},
		methods: {
			upCallback(page) {
				let httpData = {
					currentPage: page.num,
					pageSize: page.size,
					customerNeedId: this.demandId,
					sidx: 'CreatorTime',

				}
				this.$helper.ajax({
					url: `/api/Jiushi/Customerneedrecord`,
					method: 'GET',
					data: httpData,
					success: res => {
						console.log(res)
						let curPageLen = res.data.data.list.length;
						let totalSize = res.data.data.pagination.total;
						this.mescroll.endBySize(curPageLen, totalSize);
						if (page.num == 1) {
							this.dataList = []
						}
						this.dataList = this.dataList.concat(res.data.data.list);
					}
				});
			},
			init() {

				this.$helper.ajax({
					url: "/api/Jiushi/Customerneed/" + this.demandId,
					method: "GET",
					contentType: "application/json",
					success: res => {
						this.needInfo = res.data.data
						this.needInfo.typeDesc = this.needTypeData.find(item => item.value == this
								.needInfo.type)
							.label
					}
				});


				//获取打电话记录

			},
			jieshu() {
				this.$helper.ajax({
					url: "/api/Jiushi/Customerneed/End/" + this.needInfo.id,
					method: "PUT",
					contentType: "application/json",
					success: res => {
						this.$helper.msg(res.data.msg, 'success');
						this.init();
					}
				});

			},
			change(index) {
				this.current = index;

			},
			handleDetail(detail) {

				let url = '../subpage/addloan?bankUserId=' + detail.accountManagerUserId + '&customerId=' + this.needInfo
					.customerId + '&recordId=' + detail.id +
					'&needId=' + this.needInfo.id
				uni.navigateTo({
					url: url
				})

			},

			showlorndetail(detail) {
				let url = '../subpage/loandetaillist?customerNeedRecordId=' + detail.id;
				uni.navigateTo({
					url: url
				})

			},
			callManager(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},

			callGuan(phone) {

				if (this.userinfo.roleName.indexOf('客户经理') == -1) {
					return;

				}
				uni.makePhoneCall({
					phoneNumber: phone,

					success() {

					}

				});
				let url = "/api/Jiushi/Customerneedrecord";
				let method = "POST";
				this.$helper.ajax({
					url: url,
					method: method,
					contentType: "application/json",
					data: {
						customerNeedId: this.needInfo.id,
						customerId: this.needInfo.customerId
					},
					success: res => {
						this.$helper.msg(res.data.msg, 'success');
						this.mescroll.resetUpScroll();
					}
				});



			}
		}
	}
</script>

<style lang="scss" scoped>
	.company-info {
		.base-info {
			background-color: #3281ff;
			padding: 24rpx;
			height: auto;
			color: #fff;
			font-size: 28rpx;

			.company-name {
				font-size: 32rpx;
				font-weight: 600;
			}
		}
	}

	.content {
		padding: 60upx 40upx;
		font-size: 28upx;
		line-height: 48upx;
	}
</style>


<style lang="scss" scoped>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
	}

	.top {
		display: flex;
		justify-content: space-between;
	}

	.left {
		display: flex;
		align-items: center;
	}

	.store {
		margin-right: 10rpx;
		font-size: 34rpx;
		font-weight: bold;
	}


	.right {
		color: $u-type-warning-dark;
	}

	.progressBox {
		width: 150rpx;
		float: right;
	}



	.need-remark {
		color: #666;
		font-size: 28rpx;
	}

	.item {
		display: flex;
		margin: 20rpx 0 0;
	}

	.left {
		margin-right: 20rpx;
	}

	image {
		width: 260rpx;
		height: 190rpx;
		border-radius: 10rpx;
	}


	.content {
		margin-left: 10rpx;
	}

	.title {
		font-size: 28rpx;
		line-height: 45rpx;
	}

	.type {
		margin: 6rpx 0;
		font-size: 24rpx;
		color: $u-tips-color;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.delivery-time {
		color: #0081ff;
		font-size: 24rpx;
	}


	.right {
		margin-left: 10rpx;
		padding-top: 20rpx;
		text-align: right;
	}

	.decimal {
		font-size: 24rpx;
		margin-top: 4rpx;
	}

	.number {
		color: $u-tips-color;
		font-size: 24rpx;
	}


	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
	}

	.total-price {
		font-size: 32rpx;
	}


	.bottom {
		line-height: 90rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.btnBox {
		width: 150rpx;
		display: flex;
		justify-content: space-between;
	}

	.btn {
		line-height: 52rpx;
		width: 140rpx;
		border-radius: 12rpx;
		border: 2rpx solid $u-tips-color;
		font-size: 26rpx;
		text-align: center;
		color: $u-tips-color;
	}

	.evaluate {
		color: $u-type-primary;
		border-color: $u-type-primary;
	}

	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;
	}

	image {
		width: 300rpx;
		border-radius: 50%;
		margin: 0 auto;
	}

	.tips {
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
	}

	.btn {
		margin: 80rpx auto;
		width: 200rpx;
		border-radius: 32rpx;
		line-height: 64rpx;
		color: #ffffff;
		font-size: 26rpx;
		background: linear-gradient(270deg, #1cbbb4 0%, #0081ff 100%);
	}


	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		background: #f1f1f1;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}



	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}













	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
</style>